<script setup>
  import { ref } from 'vue'
  import { codeApi, bindMobileApi, checkLoginApi } from '@/server/user.js'
  import { useloginStore } from '@/store/user.js'

  // 获取用户信息
  const userInfo = ref({})

  // 表单信息
  const formData = ref({
    mobile: '13212345678',
    code: '',
  })

  // 执行云函数
  uniCloud.callFunction({
    name: 'qq-login',
    data: {
      access_token: window.location.hash.slice(14, 46),
    },
    success(result) {
      userInfo.value = result
      function_name()
    },
    fail(err) {
      console.log(err)
    },
  })

  // 检测绑定状态
  async function function_name() {
    const res = await checkLoginApi({
      openId: userInfo.value.result.openid,
      source: 'qq',
      nickname: userInfo.value.result.nickname,
      avatar: userInfo.value.result.avator,
    })

    if (res.data.code === 10000) {
      submitMobile(res.data.data)
    }
  }

  // 获取验证码
  async function onCodefn() {
    const res = await codeApi({
      mobile: formData.value.mobile,
      type: 'bindMobile',
    })
    console.log(res)
    if (res.data?.data?.code) {
      formData.value.code = res.data.data.code
    } else {
      uni.utils.toast(res.data.message)
    }
  }

  // 绑定手机号
  async function onbindBtnfn() {
    console.log(formData.value)

    const res = await bindMobileApi({
      mobile: formData.value.mobile,
      code: formData.value.code,
      openId: userInfo.value.result.openid,
    })
    console.log(res)
    submitMobile(res.data.data)
  }

  // 登录后存储值
  function submitMobile(data) {
    useloginStore().token = data.token
    useloginStore().refreshToken = data.refreshToken
    useloginStore().userId = data.id

    // 跳转
    const reductUrl = useloginStore().redictUrl
    const openType = useloginStore().openType

    uni[openType]({
      url: reductUrl,
    })
  }

  function noBindBtnfn() {
    uni.utils.toast('必须绑定手机号！')
  }
</script>
<template>
  <view class="user-login">
    <view class="welcome">
      <image class="avatar" :src="userInfo?.result?.avator"></image>
      <text class="nickname">
        Hi，{{ userInfo?.result?.nickname }}
        欢迎来优医咨询，完成绑定后可以QQ账号一键登录哦~
      </text>
    </view>

    <uni-forms class="login-form" ref="form" v-bind:modelValue="formData">
      <uni-forms-item name="name">
        <uni-easyinput
          v-model="formData.mobile"
          :input-border="false"
          :clearable="false"
          placeholder="请输入手机号"
          placeholder-style="color: #C3C3C5"
        />
      </uni-forms-item>
      <uni-forms-item name="name">
        <uni-easyinput
          :input-border="false"
          v-model="formData.code"
          :clearable="false"
          placeholder="请输入验证码"
          placeholder-style="color: #C3C3C5"
        />
        <text class="text-button" @click="onCodefn">获取验证码</text>
      </uni-forms-item>

      <view class="agreement">
        <uni-icons
          v-if="true"
          size="18"
          color="#16C2A3"
          type="checkbox-filled"
        />
        <uni-icons v-else size="18" color="#d1d1d1" type="circle" />
        我已同意
        <text class="link">用户协议</text>
        及
        <text class="link">隐私协议</text>
      </view>

      <button class="uni-button" @click="onbindBtnfn">绑定手机号</button>
      <button class="uni-button secondary" @click="noBindBtnfn">
        暂不绑定
      </button>
    </uni-forms>
  </view>
</template>

<style lang="scss">
  .user-login {
    padding: 120rpx 60rpx 0;
  }

  .welcome {
    display: flex;
    align-items: center;
    margin-bottom: 60rpx;

    .avatar {
      width: 100rpx;
      height: 100rpx;
      margin-right: 20rpx;
      border-radius: 10rpx;
    }

    .nickname {
      flex: 1;
      font-size: 28rpx;
      color: #3c3e42;
    }
  }

  .uni-forms-item {
    height: 80rpx;
    margin-bottom: 30rpx !important;
    border-bottom: 1rpx solid #ededed;
    box-sizing: border-box;
    position: relative;
  }

  .agreement {
    font-size: 26rpx;
    color: #3c3e42;
    display: flex;
    align-items: center;
    margin-top: 50rpx;
    margin-left: -10rpx;

    .link {
      color: #16c2a3;
    }
  }

  :deep(.uni-forms-item__content) {
    display: flex;
    align-items: center;
  }

  :deep(.uni-forms-item__error) {
    width: 100%;
    padding-top: 10rpx;
    padding-left: 10rpx;
    border-top: 2rpx solid #eb5757;
    color: #eb5757;
    font-size: 24rpx;
    transition: none;
  }

  .text-button {
    display: flex;
    justify-content: flex-end;
    width: 240rpx;
    padding-left: 10rpx;
    font-size: 28rpx;
    color: #16c2a3;
    border-left: 2rpx solid #eee;
  }

  .uni-button {
    margin-top: 50rpx;

    &.secondary {
      background-color: #50c8fd;
    }

    &[disabled] {
      background-color: #fafafa;
      color: #d9dbde;
    }
  }

  .uni-navigator {
    margin-top: 30rpx;
    text-align: center;
    color: #848484;
    font-size: 28rpx;
  }
</style>
